﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript and Knockout HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
    
</head>
<body>
    <h1>TypeScript and Knockout HTML App</h1>

    <div id="content">
        <span>There are <span data-bind="text: tasks().length"> </span> elements in the tasks array. </span>
        <div class="ColoredTable">
            <table>
                <tr>
                    <td></td>
                    <td><a href="" data-bind="click: sortColumns">Id</a></td>
                    <td>Title</td>
                    <td>Details</td>
                    <td></td>
                </tr>
                <!--<tbody data-bind="foreach: tasks">-->
                    <!-- ko foreach: tasks -->
                    <tr>
                        <td>
                            <input type="checkbox" data-bind="checked: isSelected" />
                        </td>
                        <td>
                            <p data-bind="text: id"></p>
                        </td>
                        <td>
                            <div data-bind="if: !editEnabled()">
                                <p data-bind="text: title"></p>
                            </div>
                            <div data-bind="if: editEnabled()">
                                <input type="text" data-bind="value: title" />
                            </div>
                        </td>
                        <td>
                            <div data-bind="if: !editEnabled()">
                                <p data-bind="text: detail"></p>
                            </div>
                            <div data-bind="if: editEnabled()">
                                <input type="text" data-bind="value: detail" />
                            </div>
                        </td>
                        <td>
                            <div data-bind="if: !editEnabled()">
                                <a href="" data-bind="click: $root.editRow">Edit|</a>
                            </div>
                            <div data-bind="if: editEnabled()">
                                <a href="" data-bind="click: $root.submitRow">Done|</a>
                            </div>
                            <a href="" data-bind="click: $root.deleteItem">Delete</a>
                        </td>
                    </tr>
                <!--</tbody>-->                
                <!-- /ko -->
            </table>
        </div>
        
        <p>
            <a href="#" data-bind="click: addChild">Add child</a>
        </p>
        <p>
            <input type="button" value="Submit Changes" data-bind="click: saveEditsChanges"/>
        </p>
    </div>
    <script src="ListViewModel.js"></script>
</body>
</html>
